<!--
 * @Description: 服务列表
 * @Author: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @Date: 2023-08-17 17:40:13
 * @LastEditTime: 2023-08-19 15:22:05
 * @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY
-->

<template>
  <div class="diy-service-list">
    <div
      class="service-item flex-center fill-base"
      v-for="(item, index) in serviceList"
      :key="index"
    >
      <img class="cover" :src="item.cover" />
      <div class="flex-1 ml-md" style="width: 239px">
        <div class="flex-between">
          <div
            class="f-paragraph c-title text-bold ellipsis"
            style="max-width: 160px"
          >
            {{ item.title }}
          </div>
          <div class="f-icontext c-caption">{{ item.total_sale }}人选择</div>
        </div>
        <div
          class="f-icontext c-caption mt-sm mb-sm ellipsis"
          style="height: 15px"
        >
          {{ item.sub_title || '' }}
        </div>
        <div class="flex-y-center f-caption c-caption">
          <i
            class="iconfont iconshijian"
            style="font-size: 12px; margin-right: 2px"
            :style="{ color: primaryColor }"
          ></i
          >{{ item.time_long }}分钟
        </div>
        <div class="flex-between">
          <div class="flex-y-center f-desc c-caption ellipsis">
            <div class="flex-y-baseline f-icontext c-warning">
              <div class="small-text">¥</div>
              <div class="f-title">
                {{ item.price }}
              </div>
            </div>
          </div>
          <div
            class="item-btn flex-center f-caption c-base"
            :style="{ background: primaryColor }"
          >
            <div
              class="flex-center"
              :class="[
                { text: $t('action.attendantName').length > 3 },
                { text1: $t('action.attendantName').length > 4 }
              ]"
            >
              选择{{ $t('action.attendantName') }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'serviceList',
  props: {
    o: Object,
    primaryColor: String
  },
  data () {
    return {
      serviceList: [{
        title: '空调维修，加氟，清洗空调外机箱',
        cover: 'https://card-1253902191.cos.ap-chengdu.myqcloud.com/image/666/22/09/HUEixqOKXsrBtGsipyWOJeI9WFPyklXp.jpg',
        price: 89,
        total_sale: 16,
        time_long: 4,
        init_price: 99,
        sub_title: '空调维修，加氟，清洗空调外机箱空调维修，加氟，清洗空调外机箱'
      }, {
        title: '小儿推拿针灸，各种按摩活动',
        cover: 'https://lbqnyv3.migugu.com/image/666/23/02/ozPjt1ySlDaQhw85OqnEEJtCy3kds3ux.jpg',
        price: 88,
        total_sale: 10,
        time_long: 10,
        init_price: 99,
        sub_title: ''
      }]
    }
  }
}
</script>
<style lang="scss" scoped>
.diy-service-list {
  .service-item {
    margin: 8px;
    margin-bottom: 0;
    padding: 12px;
    border-radius: 8px;
    .cover {
      width: 84px;
      height: 84px;
      border-radius: 8px;
      object-fit: cover;
    }

    .time-long {
      min-width: 36px;
      height: 15px;
      padding: 0 2px;
      background: linear-gradient(270deg, #4c545a 0%, #282b34 100%);
      border-radius: 2px;
      font-size: 10px;
      transform: scale(0.9);
      color: #ffeeb9;
      margin-right: 4px;
    }

    .f-icontext {
      font-size: 9px;
    }

    .small-text {
      font-size: 9px;
      margin-left: 2px;
    }
    .text-delete {
      color: #b9b9b9;
      transform: scale(0.8);
    }

    .item-btn {
      min-width: 60px;
      height: 23px;
      border-radius: 4px;
      .text {
        min-width: 76px;
        transform: scale(0.9);
      }
      .text1 {
        min-width: 84px;
        transform: scale(0.8);
      }
    }
  }
}
</style>
